<template>
  <div id="homePage">
    <a-layout>
      <!--搜索框-->
      <a-layout-header class="searchStyle"
        ><InputSearch @onInputChange="onInputChange" />
      </a-layout-header>
      <SearchList
        v-if="searchWord && filteredCards.length > 0"
        :filteredCards="filteredCards"
      />
      <a-layout class="containerStyle">
        <!--左侧导航栏-->
        <a-layout-sider class="sideStyle"
          ><CategorySideBar @onCategoryChange="handleCategoryChange"
        /></a-layout-sider>
        <a-layout-content class="contentStyle"
          ><CardList :cardData="cardData" :currentCategory="currentCategory"
        /></a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import InputSearch from "@/components/InputSearch.vue";
import SearchList from "@/components/SearchList.vue";
import CategorySideBar from "@/components/CategorySideBar.vue";
import CardList from "@/components/CardList.vue";
import { computed, ref } from "vue";
import { Card, Category } from "@/consts";
import { cardDataMock } from "@/mock";

const cardData = ref<Card[]>(cardDataMock);
const searchWord = ref();
const currentCategory = ref<Category>(Category.all);

const filteredCards = computed(() => {
  if (!searchWord.value) {
    return [];
  }
  const searchTerm = searchWord.value.toLowerCase();
  return cardData.value.filter((card) => {
    if (!card.title) return false;
    return card.title.toLowerCase().includes(searchTerm);
  });
});

const onInputChange = (searchWords: string) => {
  searchWord.value = searchWords;
  console.log(searchWords);
};
const handleCategoryChange = (categoryKey: Category) => {
  currentCategory.value = categoryKey;
};
</script>

<style scoped>
#homePage .searchStyle {
  background: #f5f5f5;
  padding-inline: 0;
  z-index: 2;
}
#homePage .containerStyle {
  margin-top: 2rem;
}
#homePage .sideStyle {
  background: #f5f5f5;
}
#homePage .contentStyle {
  background: white;
  margin-left: 24px;
  border-radius: 24px;
}
</style>
